<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" title="缴费单详情"></xk-header>
		<view class="list">
			<view class="content-title"><view class="title-icon"></view>缴费信息</view>
			<view class="list-item item-border">
				<view>缴费月份</view>
				<view>{{data.handle_date}}月份</view>
			</view>
			<view class="list-item item-border">
				<view>缴费单号</view>
				<view>{{data.apply_no}}</view>
			</view>
			<view class="list-item item-border">
				<view>物业编号</view>
				<view>{{data.property_code}}</view>
			</view>
			<view class="list-item item-border">
				<view>业主姓名</view>
				<view>{{data.company_name}}</view>
			</view>
			<view class="list-item item-border">
				<view>本月租金(元)</view>
				<view>{{data.month_money | formatMoney}}</view>
			</view>
			<view class="list-item item-border">
				<view>本月自用电费(元)</view>
				<view>{{data.month_electricity_money | formatMoney}}</view>
			</view>
			<view class="list-item item-border">
				<view>本月自用水费(元)</view>
				<view>{{data.month_water_money | formatMoney}}</view>
			</view>
			<view class="list-item item-border">
				<view>本月物业管理费(元)</view>
				<view>{{data.management_money | formatMoney}}</view>
			</view>
			<view class="list-item item-border">
				<view>本月公摊电费(元)</view>
				<view>{{data.pool_electricity_money | formatMoney}}</view>
			</view>
			<view class="list-item item-border">
				<view>本月公摊水费(元)</view>
				<view>{{data.pool_water_money | formatMoney}}</view>
			</view>
			<view class="list-item-bottom">
				<view>
					<view>合计(元):</view>
					<view class="pay-money">{{data.total_money | formatMoney}}</view>
				</view>
				<view class="pay-money-large">金额大写:{{data.total_money_capital}}</view>
			</view>
		</view>
		<view class="list" @click="goSearch()">
			<view class="list-item">
				<view class="search-title">账单查询</view>
				<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
			</view>
		</view>

		<view class='placeholder-view'></view>
		<view class="bottom-view">
			<view>
				<view class="left-view">
					<view>合计:</view>
					<view class="pay-money">{{data.total_money | formatMoney}}</view>
					<view>元</view>
				</view>
				<view class="common-btn btn" @click="onConfirm()"
					v-if="data.status==='CUSTOMER_CONFIRM'">账单确认</view>
				<view class="common-btn btn" @click="onPay()"
					v-if="data.status==='TO_PAY'">缴费确认</view>
			</view>
		</view>
		<!--  -->
	</view>
</template>
<script>
	import config from '@/common/config.js'
	import moment from 'moment'

	export default {
		data() {
			return {
				eventName: "",
				data: {}
			};
		},
		onLoad(options) {
			if (options && options.eventName) {
				this.eventName = options.eventName
			}
			if (options && options.data) {
				this.data = JSON.parse(options.data)
				console.warn("缴费信息：", this.data)
			}
		},
		methods:{
			onConfirm() {
				this.$util.confirm({
					content: "确认账单无误？",
					confirmText: "账单确认"
				}).then(isConfirm => {
					if (isConfirm) {
						this.$util.post({
							url: "app/piPayNotice/confirm",
							data: {
								pay_id: this.data.pay_id
							}
						}).then(res => {
							this.$util.toast("缴费成功")
							this.callback()
						})
					}
				})
			},
			onPay() {
				this.$util.confirm({
					content: "确认账单已缴费？",
					confirmText: "缴费确认"
				}).then(isConfirm => {

					if (isConfirm) {
						this.$util.post({
							url: "app/piPayNotice/pay",
							data: {
								pay_id: this.data.pay_id,
								pay_voucher: ""	// 支付凭着截图暂时为空
							}
						}).then(res => {
							this.$util.toast("缴费成功")
							this.callback()
						})
					}
				})
			},
			callback() {
				this.$api.piPayNotice_getPiPayNoticeSingle({
					pay_id: this.data.pay_id
				}).then(res=>{
					if (this.eventName) {
						this.$EventBus.$emit(this.eventName, res);
					}
					setTimeout(()=>{
						uni.navigateBack();
					}, 1000)
				})
			},
			goSearch() {
				uni.navigateTo({
					url: "/pagesC/bill/index"
				})
			}
		}
	}
</script>

<style lang="scss">
.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 15rpx;

	.content-title{
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding: 32rpx 0rpx;
		.title-icon{
			width: 12rpx;
			height: 40rpx;
			background-color: #2C72FF;
			border-top-right-radius: 8rpx;
			border-bottom-right-radius: 8rpx;
			margin-right: 10rpx;
		}
	}

	.list-item {
		display: flex;
		flex-direction: row;
		align-items: center;

		color: #333333;
		font-size: 28rpx;
		padding: 35rpx 20rpx;

		:first-child {
			display: flex;
			flex: 1;
		}

		.search-title {
			font-size: 32rpx;
		}
		.jiantou {
			width: 14rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}
	.item-border {
		border-bottom: 1rpx #F8F8F8 solid;
	}
	.list-item-bottom {
		display: flex;
		flex-direction: column;
		justify-content: right;
		text-align: right;
		color: #333333;
		font-size: 28rpx;
		padding: 35rpx 20rpx;
		:first-child {
			display: flex;
			flex: 1;
			flex-direction: row;
			justify-content: flex-end;
			text-align: right;
		}
		.pay-money-large {
			color: #989898;
			font-size: 24rpx;
			margin-top: 10rpx;
		}
	}
}
.pay-money {
	color: #FF3737;
	font-weight: bold;
	margin-left: 10rpx;
}
.placeholder-view {
	height: 150rpx;
}
.bottom-view {
	position: fixed;
	width: 750rpx;
	bottom: var(--window-bottom);

	>view {
		display: flex;
		flex: 1;
		align-items: center;
		background-color: #FFFFFF;
		padding: 35rpx 30rpx 35rpx 30rpx;

		.left-view {
			display: flex;
			flex: 1;

			:last-child {
				margin-left: 10rpx;
			}
		}
		.btn {
			width: 280rpx;
			height: 80rpx;
			padding: 0rpx;
			margin: 0rpx;
		}
	}

}


</style>
